<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>汽车信息列表</title>
  <link rel="stylesheet" href="../../layui/css/layui.css">
  <link rel="stylesheet" href="../../css/global.css">
  <link rel="stylesheet" href="../../css/admin.css">
  <script src="../../layui/layui.js"></script>
</head>
<body style="padding-top: 10px">

<form class="layui-form" id="f1">
  <div class="layui-inline">
    <div class="layui-input-block">
      <input type="text" name="rvBrand" id="search_rvBrand" style="width: 200px;"  placeholder="请输入汽车名称" autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-inline">
    <input type="button" id="selectBtn" class="layui-btn" data-type="reload" value="查询">
  </div>
  <div class="layui-inline">
    <input type="button" id="addBtn" class="layui-btn" data-type="reload" value="添加">
  </div>
</form>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="show">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看详情</a>
  </div>
</script>

<!-- 动态数据表格-->
<!-- 第一：定义页面结构 -->
<table id="table" lay-filter="test" style="width: 80%;text-align: center" class="layui-table"></table>

<!-- 添加表单开始 -->
<div id="addContainer" style="display: none">
  <form class="layui-form" id="addForm" lay-filter="example" style="margin: 1rem">

    <div class="layui-form-item">
      <label class="layui-form-label">颜色</label>
      <div class="layui-input-block">
        <input type="text" id="add-rvColour" name="rvColour"
               autocomplete="off" class="layui-input" />
      </div>
    </div>


    <div class="layui-form-item">
      <label class="layui-form-label">价格</label>
      <div class="layui-input-block">
        <input type="text" id="add-rvPrice" name="rvPrice"
               autocomplete="off" class="layui-input" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">出租价格</label>
      <div class="layui-input-block">
        <input type="text" id="add-rvHirePrice" name="rvHirePrice"
               autocomplete="off" class="layui-input" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">押金</label>
      <div class="layui-input-block">
        <input type="text" id="add-rvDeposit" name="rvDeposit"
               autocomplete="off" class="layui-input" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">描述</label>
      <div class="layui-input-block">
        <input type="text" id="add-rvDescribe" name="rvDescribe"
               autocomplete="off" class="layui-input" />
      </div>
    </div>


  </form>
</div>
<!-- 添加表单结束 -->

<!-- 修改表单开始 -->
<div id="updateContainer" style="display: none">
  <form class="layui-form" id="update" lay-filter="example" style="margin: 1rem">
    <div class="layui-form-item">
      <label class="layui-form-label">编号</label>
      <div class="layui-input-block">
        <input type="text" id="update-id" name="id"
               autocomplete="off" class="layui-input" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">品牌</label>
      <div class="layui-input-block">
        <input type="text" id="update-rvBrand" name="rvBrand"
               autocomplete="off" class="layui-input" />
      </div>
    </div>


    <div class="layui-form-item">
      <label class="layui-form-label">颜色</label>
      <div class="layui-input-block">
        <input type="text" id="update-rvColour" name="rvColour"
               autocomplete="off" class="layui-input" />
      </div>
    </div>


    <div class="layui-form-item">
      <label class="layui-form-label">价格</label>
      <div class="layui-input-block">
        <input type="text" id="update-rvPrice" name="rvPrice"
               autocomplete="off" class="layui-input" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">出租价格</label>
      <div class="layui-input-block">
        <input type="text" id="update-rvHirePrice" name="rvHirePrice"
               autocomplete="off" class="layui-input" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">押金</label>
      <div class="layui-input-block">
        <input type="text" id="update-rvDeposit" name="rvDeposit"
               autocomplete="off" class="layui-input" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">状态</label>
      <div class="layui-input-block">
        <input type="text" id="update-rvHire" name="rvHire"
               autocomplete="off" class="layui-input" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">描述</label>
      <div class="layui-input-block">
        <input type="text" id="update-rvDescribe" name="rvDescribe"
               autocomplete="off" class="layui-input" />
      </div>
    </div>


  </form>
</div>
<!-- 添加表单结束 -->

<script>
  layui.use(['jquery','table','layer','form','upload'],function(){
    // 实例化动态表格的实例对象
    let $ = layui.jquery;
    let table = layui.table;
    let layer = layui.layer;
    let form = layui.form;
    let upload = layui.upload;



    // 定义动态表格相关的参数
    table.render({
      elem: '#table'
      ,id:'tableReload'
      ,url:'/room/getRoom'
      ,title:'客房列表'
      ,page: true 	// 开启分页
      ,limit:5
      ,limits:[5,10]
      ,cols:[[
        // {field: '实体对象的属性名称', title: '列头显示内容', width:宽, sort: 是否排序, fixed: '定位'}
        {field: 'roomId', title: '客房编号', width:100 }
        ,{field: 'roomNo', title: '房间号', width:100}
        ,{field: 'roomName', title: '客房名称', width:100}
        ,{field: 'roomImage', title: '客房图片', width:80}
        ,{field: 'roomFacilities', title: '客房设施', width:100}
        ,{field: 'roomPrice', title: '客房价格', width:100}
        ,{field: 'reMark',title: '备注',width: 80}
        ,{toolbar:'#toolbarDemo' ,title: '操作'}
      ]]
    });


    //绑定查询按钮
    $('#selectBtn').on('click',function (){
      //执行重载 - 重载发起请求，并传递相关条件
      table.reload('tableReload',{
        page:{
          curr: 1
        }
        ,where:{
          'rvBrand':$('#search_rvBrand').val(),
        }
      });
    })


    // 监听工具条中相关的按钮，实现相关的操作
    // 监听 test 行工具事件 - 实现删除与修改操作
    table.on('tool(test)',function (obj){
      // 获取当前行的数据
      let currentRow = obj.data;
      // 获取table工具条件的具体事件，事件名称通过lay-event定义
      let layuiEvent = obj.event;

      //修改
      if (layuiEvent === 'show'){
        $('#update-id').val(currentRow.id);
        $('#update-rvBrand').val(currentRow.rvBrand);
        $('#update-typeid').val(currentRow.typeid);
        $('#update-rvColour').val(currentRow.rvColour);
        $('#update-rvPrice').val(currentRow.rvPrice);
        $('#update-rvHirePrice').val(currentRow.rvHirePrice);
        $('#update-rvDeposit').val(currentRow.rvDeposit);
        $('#update-rvHire').val(currentRow.rvHire);
        $('#update-rvDescribe').val(currentRow.rvDescribe);
        form.render();
        layer.open({
          type:1,
          title:'修改汽车信息',
          area:['50%','35em'],
          resize:false,
          content:$("#updateContainer"),
          btn:['修改','取消'],
          btn1:function (index){

            let update = $('#update').serialize();

            $.ajax({
              url:'',
              method:'post',
              data: update,
              success:function (res){
                //弹出提示框
                layer.msg(res.message);
                //根据弹出层的索引，关闭弹出确认框
                layer.close(index);

                if (res.code==200){
                  //重新加载表格数据
                  table.reload('tableReload',{page:{curr:1}});
                }
              }
            })
          }
        })
      } else if(layuiEvent === 'update') {

        layer.confirm("您确定要修改状态吗?",function (index){
          //向服务器发起异步请求，实现数据的删除
          $.ajax({
            url:'',
            method:'post',
            data:{'id':currentRow.id,'rvHire': currentRow.rvHire},
            success:function ( res ){
              //弹出提示框
              layer.msg(res.message);
              //根据弹出层的索引，关闭弹出确认框
              layer.close(index);

              if (res.code == 200){
                // 重新加载表格数据
                table.reload('tableReload',{page:{curr:1}});
              }

            }
          })

        });
      }
    });


    //实现添加汽车操作
    $("#addBtn").click(function (){
      layer.open({
        type:1,
        title:'添加汽车',
        area:['50%','35em'],
        resize:false,
        content:$("#addContainer"),
        btn:['添加','取消'],
        btn1:function ( index ){

          let formData = {
            rvBrand:$("#add-rvBrand").val(),
            typeId:$("#add-typeid").val(),
            rvColour:$("#add-rvColour").val(),
            rvPrice:$("#add-rvPrice").val(),
            rvHirePrice:$("#add-rvHirePrice").val(),
            rvDeposit:$("#add-rvDeposit").val(),
            rvDescribe:$("#add-rvDescribe").val(),
          }

          $.ajax({
            url:'',
            method:'post',
            data:formData,
            success:function ( res ){
              //弹出提示框
              layer.msg(res.message)
              //根据弹出层的索引，关闭弹出确认框
              layer.close(index);

              if (res.code == 200){
                //重新加载表格数据
                table.reload('tableReload',{page: {curr:1}})
              }
            }
          })
        },
      });
    });



  });

</script>



</body>
</html>